<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<!--NewPage-->
<HTML>
<HEAD>
<TITLE>
Zapatec.Drag
</TITLE>
<LINK REL ="stylesheet" TYPE="text/css" HREF="../stylesheet.css" TITLE="Style">
</HEAD>
<SCRIPT>
function asd()
{
parent.document.title="Zapatec.Drag";
}
</SCRIPT>
<BODY BGCOLOR="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<A NAME="navbar_bottom"><!-- --></A>
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="1" CELLSPACING="0">
<TR>
<TD COLSPAN=3 BGCOLOR="#EEEEFF" CLASS="NavBarCell1">
<A NAME="navbar_bottom_firstrow"><!-- --></A>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3">
  <TR ALIGN="center" VALIGN="top">
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../overview-summary.html"><FONT CLASS="NavBarFont1"><B>Overview</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">  <A HREF="../overview-summary-zpdrag.js.html"><FONT CLASS="NavBarFont1"><B>File</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev">&nbsp;<FONT CLASS="NavBarFont1Rev"><B>Class</B></FONT>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../overview-tree.html"><FONT CLASS="NavBarFont1"><B>Tree</B></FONT></A>&nbsp;</TD>
  <!--TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1"-->    <!--A HREF="deprecated-list.html"--><!--FONT CLASS="NavBarFont1">Deprecated</FONT--><!--/A--><!--&nbsp;</TD-->
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../index-all.html"--><FONT CLASS="NavBarFont1"><B>Index</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../help-doc.html"><FONT CLASS="NavBarFont1"><B>Help</B></FONT></A>&nbsp;</TD>
  </TR>
</TABLE>
</TD>
<TD ALIGN="right" VALIGN="top" ROWSPAN=3><EM>
<B>Zapatec Utils</B>
</EM>
</TD
</TR>

<TR>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
&nbsp;<A HREF="../Zapatec/DemoExplorer.html"><B>PREV CLASS</B></A><!-- 
   NEXT CLASS 
-->
&nbsp;<A HREF="../Zapatec/EditInline.html"><B>NEXT CLASS</B></A></FONT></TD>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
  <A HREF="../index.html" TARGET="_top"><B>FRAMES</B></A>  &nbsp;
&nbsp;<A HREF="" TARGET="_top"><B>NO FRAMES</B></A>  &nbsp;
&nbsp;
<SCRIPT>
  <!--
  if(window==top) {
    document.writeln('<A HREF="../allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</SCRIPT>
<NOSCRIPT>
<A HREF="../allclasses-noframe.html" TARGET=""><B>All Classes</B></A>
</NOSCRIPT>
</FONT></TD>
</TR>
<TR>
<TD VALIGN="top" CLASS="NavBarCell3"><FONT SIZE="-2">
  SUMMARY:&nbsp;<A HREF="#field_summary">FIELD</A>&nbsp;|&nbsp;<A HREF="#constructor_summary">CONSTR</A>&nbsp;|&nbsp;<A HREF="#method_summary">METHOD</A></FONT></TD>
<TD VALIGN="top" CLASS="NavBarCell3"><FONT SIZE="-2">
DETAIL:&nbsp;<A HREF="#field_detail">FIELD</A>&nbsp;|&nbsp;<A HREF="#constructor_detail">CONSTR</A>&nbsp;|&nbsp;<A HREF="#method_detail">METHOD</A></FONT></TD>
</TR>
</TABLE>
<!-- =========== END OF NAVBAR =========== -->
<HR>

<!-- ======== START OF CLASS DATA ======== -->
<H2>Class Zapatec.Drag</H2>
<PRE>Object
   |
   +--<b>Zapatec.Drag</b>
</PRE>


<HR>
<DL>
   <!-- Class definition -->
   <DT>class 
   <B>Zapatec.Drag</B>
   

</DL>
   
   <P>
   <I>Defined in <a href='../overview-summary-zpdrag.js.html'>zpdrag.js</a></I><BR/><BR/>
   </P>
   
   <HR>

<!-- ======== NESTED CLASS SUMMARY ======== -->

<!-- ======== END NESTED CLASS SUMMARY ======== -->


<!-- =========== FIELD SUMMARY =========== -->


   

<!-- =========== END FIELD SUMMARY =========== -->


<!-- ======== CONSTRUCTOR SUMMARY ======== -->

<A NAME="constructor_summary"><!-- --></A>
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
<TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
<TD COLSPAN=2><FONT SIZE="+2">
<B>Constructor Summary</B></FONT></TD>
</TR>
<TR BGCOLOR="white" CLASS="TableRowColor">
   <TD>
      <CODE>
	 <B>
	    <A HREF="#Zapatec.Drag()">Zapatec.Drag</A></B>()
      </CODE>
      <BR>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      
      </TD>
</TR>
</TABLE>

<!-- ======== END CONSTRUCTOR SUMMARY ======== -->

&nbsp;

<!-- ========== METHOD SUMMARY =========== -->

<A NAME="method_summary"><!-- --></A>
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
<TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
<TD COLSPAN=2><FONT SIZE="+2">
<B>Method Summary</B></FONT></TD>
</TR>


   <TR BGCOLOR="white" CLASS="TableRowColor">
      <TD ALIGN="right" VALIGN="top" WIDTH="1%">
	 <FONT SIZE="-1">
	    <CODE>&lt;static&gt;&nbsp;boolean</CODE>
	 </FONT>
      </TD>
      <TD>
	 <CODE>
	    <B>
	       <A HREF="#!s!start">start</A></B>(&lt;object&gt; oEv, &lt;object&gt; sId, &lt;object&gt; oArg)
	 </CODE>
	 <BR>
	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	 Starts dragging an element.
      </TD>
   </TR>


</TABLE>



<P>
<!-- ========== END METHOD SUMMARY =========== -->


<!-- ============ FIELD DETAIL START =========== -->


<!-- ============ FIELD DETAIL END =========== -->

    <!-- ========= CONSTRUCTOR DETAIL START ======== -->

<A NAME="constructor_detail"><!-- --></A>
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
   <TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
      <TD COLSPAN=1>
      <FONT SIZE="+2"><B>Constructor Detail</B></FONT>
      </TD>
   </TR>
</TABLE>

<A NAME="Zapatec.Drag()"><!-- --></A><H3>
Zapatec.Drag</H3>
<PRE><B>Zapatec.Drag</B>()</PRE>




   </UL>


<!-- Constructor return value(s) -->

<!-- End constructor return value(s) -->

<!-- ADDITIONAL ATTRIBUTES -->

<HR/>
<!-- END ADDITIONAL ATTRIBUTES  -->

<!-- ========= CONSTRUCTOR DETAIL END ======== -->


<!-- ============ METHOD DETAIL START ========== -->

<A NAME="method_detail"><!-- --></A>
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
   <TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
      <TD COLSPAN=1><FONT SIZE="+2">
         <B>Method Detail</B></FONT>
      </TD>
   </TR>
</TABLE>

<!-- One single method detail entry -->

   <A NAME="!s!start"><!-- --></A>
   <H3>start</H3>
   <PRE>&lt;static&gt; boolean <B>start</B>(&lt;object&gt; oEv, &lt;object&gt; sId, &lt;object&gt; oArg)</PRE>
   
      <UL>Starts dragging an element.

 <xmp>
 To make an element draggable, just attach Zapatec.Drag.start function to its
 mousedown event:

 <div id="myDiv"
  onmousedown="return Zapatec.Drag.start(window.event, this.id)">
 </div>

 It is not mandatory to use mousedown event like shown above. You can make
 the element draggable from any part of your code just by calling
 Zapatec.Drag.start function, or attach it to other event.
 </xmp>

 <pre>
 Fires static Zapatec events:

 <b>dragStart</b> before dragging is started. Listener receives following
 object:
 {
   el: [object] element got by id passed to Zapatec.Drag.start function,
   event: [object] event object passed to Zapatec.Drag.start function,
   args: [object] additional arguments passed to <a href="../Zapatec/Drag.html#!s!start">Zapatec.Drag.start()</a>
 }

 <b>dragMove</b> on every mouse move while element is dragged. Listener
 receives following object:
 {
   el: [object] element got by id passed to Zapatec.Drag.start function,
   startLeft: [number] initial left offset,
   startTop: [number] initial top offset,
   prevLeft: [number] previous left offset,
   prevTop: [number] previous top offset,
   left: [number] current left offset,
   top: [number] current top offset,
   realLeft: [number] can be used to determine position or size of the element
    if its movement was not limited by vertical or step option,
   realTop: [number] can be used to determine position or size of the element
    if its movement was not limited by horizontal or step option,
   startWidth: [number] initial width,
   startHeight: [number] initial height,
   prevWidth: [number] previous width,
   prevHeight: [number] previous height,
   width: [number] current width,
   height: [number] current height,
   event: [object] event object,
   args: [object] additional arguments passed to <a href="../Zapatec/Drag.html#!s!start">Zapatec.Drag.start()</a>
 }

 <b>dragEnd</b> after element was dropped. Listener receives following object:
 {
   el: [object] element got by id passed to Zapatec.Drag.start function,
   startLeft: [number] initial left offset,
   startTop: [number] initial top offset,
   left: [number] current left offset,
   top: [number] current top offset,
   realLeft: [number] can be used to determine position or size of the element
    if its movement was not limited by vertical or step option,
   realTop: [number] can be used to determine position or size of the element
    if its movement was not limited by horizontal or step option,
   startWidth: [number] initial width,
   startHeight: [number] initial height,
   width: [number] current width,
   height: [number] current height,
   event: [object] event object,
   args: [object] additional arguments passed to <a href="../Zapatec/Drag.html#!s!start">Zapatec.Drag.start()</a>
 }

 Offsets are in pixels and relative to offsetParent of the element.

 Additional arguments format:
 {
   vertical: [boolean] if true, element moves only vertically,
   horizontal: [boolean] if true, element moves only horizontally,
   limitTop: [number] element doesn't go beyond this limit when moved up,
   limitBottom: [number] element doesn't go beyond this limit when moved down,
   limitLeft: [number] element doesn't go beyond this limit when moved to
    the left,
   limitRight: [number] element doesn't go beyond this limit when moved to
    the right,
   stepVertical: [number] vertical step in pixels - gives ability to move or
    resize element incrementally vertically,
   stepHorizontal: [number] horizontal step in pixels - gives ability to move
    or resize element incrementally horizontally,
   step: [number] sets both stepVertical and stepHorizontal to the same value,
   resize: [boolean or string] true - element is resized instead of dragging;
    'bottom-right' - element can be resized only by dragging bottom and right;
    'top-left' - element can be resized only by dragging top and left margins,
    margins
 }

 limitTop, limitBottom, limitLeft and limitRight values are in pixels relative
 to offsetParent of the element.

 Use 'bottom-right' and 'top-left' values for resize property if you need to
 limit resizing possibility by direction.
 </pre></UL>
   

   <!-- METHOD PARAMETERS START -->
   
   <UL>
   <B>Parameters:</B>
   
     <UL><CODE>oEv</CODE> -  Event object from which to get mouse position. In most  cases this is window.event. Note that when Zapatec.Drag is used, window.event  exists in all browsers. When one of mousedown, mousemove or mouseup events  occurs, window.event contains that event object.  
      </UL> 
   
     <UL><CODE>sId</CODE> -  Id of the element that is dragged  
      </UL> 
   
     <UL><CODE>oArg</CODE> -  Optional. Additional arguments  
      </UL> 
   
   </UL>
   
   <!-- METHOD PARAMETERS END -->

   
   <UL>
   <B>Returns:</B>
        <UL>
        Always true   
        </UL>
   </UL>
   

   <!-- ADDITIONAL ATTRIBUTES START -->
   
   <!-- ADDITIONAL ATTRIBUTES  END -->
<HR>



<!-- ============ METHOD DETAIL END ========== -->

<!-- ========= END OF CLASS DATA ========= -->

<!-- ========== START OF NAVBAR ========== -->
<A NAME="navbar_bottom"><!-- --></A>
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="1" CELLSPACING="0">
<TR>
<TD COLSPAN=3 BGCOLOR="#EEEEFF" CLASS="NavBarCell1">
<A NAME="navbar_bottom_firstrow"><!-- --></A>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3">
  <TR ALIGN="center" VALIGN="top">
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../overview-summary.html"><FONT CLASS="NavBarFont1"><B>Overview</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">  <A HREF="../overview-summary-zpdrag.js.html"><FONT CLASS="NavBarFont1"><B>File</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev"> &nbsp;<FONT CLASS="NavBarFont1Rev"><B>Class</B></FONT>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../overview-tree.html"><FONT CLASS="NavBarFont1"><b>Tree</b></FONT></A>&nbsp;</TD>
  <!--TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1"-->    <!--A HREF="deprecated-list.html"--><!--FONT CLASS="NavBarFont1">Deprecated</FONT--><!--/A--><!--&nbsp;</TD-->
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../index-all.html"><FONT CLASS="NavBarFont1"><B>Index</B></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="../help-doc.html"><FONT CLASS="NavBarFont1"><B>Help</B></FONT></A>&nbsp;</TD>
  </TR>
</TABLE>
</TD>
<TD ALIGN="right" VALIGN="top" ROWSPAN=3><EM>
<B>Zapatec Utils</B>
</EM>
</TD
</TR>

<TR>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
&nbsp;<A HREF="../Zapatec/DemoExplorer.html"><B>PREV CLASS</B></A><!-- 
   NEXT CLASS 
-->
&nbsp;<A HREF="../Zapatec/EditInline.html"><B>NEXT CLASS</B></A></FONT></TD>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
  <A HREF="../index.html" TARGET="_top"><B>FRAMES</B></A>  &nbsp;
&nbsp;<A HREF="" TARGET="_top"><B>NO FRAMES</B></A>  &nbsp;
&nbsp;
<SCRIPT>
  <!--
  if(window==top) {
    document.writeln('<A HREF="../allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</SCRIPT>
<NOSCRIPT>
<A HREF="../allclasses-noframe.html" TARGET=""><B>All Classes</B></A>
</NOSCRIPT>
</FONT></TD>
</TR>
<TR>
<TD VALIGN="top" CLASS="NavBarCell3"><FONT SIZE="-2">
  SUMMARY:&nbsp;<A HREF="#field_summary">FIELD</A>&nbsp;|&nbsp;<A HREF="#constructor_summary">CONSTR</A>&nbsp;|&nbsp;<A HREF="#method_summary">METHOD</A></FONT></TD>
<TD VALIGN="top" CLASS="NavBarCell3"><FONT SIZE="-2">
DETAIL:&nbsp;<A HREF="#field_detail">FIELD</A>&nbsp;|&nbsp;<A HREF="#constructor_detail">CONSTR</A>&nbsp;|&nbsp;<A HREF="#method_detail">METHOD</A></FONT></TD>
</TR>
</TABLE>

<!-- =========== END OF NAVBAR =========== -->

<HR>
<FONT SIZE="-1">

</FONT>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu May 21 12:19:24 2009</div>
</BODY>
</HTML>
